<template>
  <div class="login-box">
    <div class="login-form">
      <h1>企业中后台管理系统</h1>
      <el-form :model="formData" ref="loginFormRef" :rules="rules" label-width="70px" :inline="false">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" :prefix-icon="User" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password" :prefix-icon="Lock" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goLogin(loginFormRef)">登录</el-button>
          <el-button type="primary" @click="goReset(loginFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue';
import { FormInstance } from 'element-plus';
import useUserStore from '@/store/user';
const router = useRouter();
const loginFormRef = ref<FormInstance>();
const formData = reactive({
  username: 'admin',
  password: 'admin'
});
const rules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});
const goLogin = (ref: FormInstance | undefined) => {
  ref?.validate((valid: boolean) => {
    if (valid) {
      // 调用登录接口
      useUserStore()
        .storeUserLogin(formData)
        .then(() => {
          console.log('test');
          router.push('/');
        });
    }
  });
};

const goReset = (ref: FormInstance | undefined) => {
  ref?.resetFields();
};
</script>

<style lang="less" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 400px;
    height: 300px;
    background-color: var(--bg-form-color);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    h1 {
      color: var(--title-color);
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
</style>
